<template>
  <div class="target-setting" v-show="showTargetSetting">
    <div class="setting-progress-one" v-show="progress === 1">
      <van-cell title="目标考试时间" is-link :value="calcTargetTime" @click="triggerTimeSelector" />
      <van-cell title="开启桌面倒计时">
        <van-switch :checked="countDownSwitch" size="20px" @change="changeCountDown" />
      </van-cell>
      <div class="next-button-container">
        <van-button
          type="primary"
          block
          round
          class="next-button"
          color="#FFA722"
          @click="clickProgressOne"
          :disabled="!validateProgressOne"
        >下一步</van-button>
      </div>
      <date-selector
        :show="showTimeSelector"
        @change="changeTimeSelector"
        @confirm="confirmTimeSelector"
        @cancel="cancelTimeSelector"
      ></date-selector>
    </div>
    <div class="setting-progress-two" v-show="progress === 2">
      <div class="title">请选择考试目标</div>
      <target-btn-area @change="changeTarget"></target-btn-area>
      <div class="target-country" v-show="showCountryCell">
        <van-cell title="目标国家" @click="activeCountrySelector" is-link :value="selectedCountry" />
      </div>
      <div class="btn-area">
        <div class="next-button-container">
          <van-button
            type="primary"
            round
            block
            class="next-button"
            color="#FFF"
            @click="prevProgress"
          >上一步</van-button>
        </div>
        <div class="next-button-container">
          <van-button
            type="primary"
            round
            block
            :disabled="!validateProgressTwo"
            class="next-button"
            color="#FFA722"
            @click="clickProgressTwo"
          >下一步</van-button>
        </div>
      </div>
      <country-selector
        :show="showCountrySelector"
        @cancel="cancelCountrySelector"
        @confirm="confirmCountrySelector"
      ></country-selector>
    </div>
    <div class="setting-progress-three" v-show="progress === 3">
      <div class="title">请输入目标成绩</div>
      <div class="target-score-area">
        <van-cell
          title="听力"
          is-link
          :value="calcListeningScore"
          @click="activeScoreSelector('listeningScore')"
        />
        <van-cell
          title="口语"
          is-link
          @click="activeScoreSelector('speakingScore')"
          :value="calcSpeakingScore"
        />
        <van-cell
          title="阅读"
          is-link
          @click="activeScoreSelector('readingScore')"
          :value="calcReadingScore"
        />
        <van-cell
          title="写作"
          is-link
          @click="activeScoreSelector('writingScore')"
          :value="calcWritingScore"
        />
        <van-cell
          title="总分"
          is-link
          @click="activeScoreSelector('totalScore')"
          :value="calcTotalScore"
        />
      </div>
      <score-selector
        @cancel="cancelScoreSelector"
        :show="showScoreSelector"
        @confirm="confirmScoreSelector"
      ></score-selector>
      <div class="btn-area">
        <div class="next-button-container">
          <van-button
            type="primary"
            round
            block
            class="next-button"
            color="#FFF"
            @click="prevProgress"
          >上一步</van-button>
        </div>
        <div class="next-button-container">
          <van-button
            type="primary"
            round
            block
            class="next-button"
            :disabled="!validateProgressThree"
            @click="confirmForm"
            color="#FFA722"
          >下一步</van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import dateSelector from "./dateSelector";
import targetBtnArea from "./targetBtnArea";
import countrySelector from "./countrySelector";
import scoreSelector from "./scoreSelector";
import { formatTimeChinese, formatDay } from "../../../utils/index";
import cloudHandler from "../../../cloud/index";
export default {
  components: {
    dateSelector,
    targetBtnArea,
    countrySelector,
    scoreSelector
  },
  props: {
    showTargetSetting: {
      type: Boolean
    },
    extraUserInfo: {
      type: Object
    },
    goal: {
      type: Object
    }
  },
  data() {
    return {
      progress: 1,
      countDownSwitch: true, // 是否显示倒计时
      showCountrySelector: false, // 国家选择器
      showTimeSelector: false,
      selectedCountry: "",
      target: "",
      listeningScore: "",
      readingScore: "",
      writingScore: "",
      speakingScore: "",
      totalScore: "",
      targetTime: "", // 目标考试时间
      showScoreSelector: false // 分数选择器
    };
  },
  computed: {
    showCountryCell() {
      return (
        [
          "留学读高中",
          "留学读本科",
          "留学读硕士",
          "留学读博士",
          "移民"
        ].indexOf(this.target) > -1
      );
    },
    targetText() {
      if (this.showCountryCell) {
        return `去${this.selectedCountry}${this.target}`;
      } else {
        return this.target;
      }
    },
    calcTargetTime() {
      if (!this.targetTime) return "";
      return formatTimeChinese(new Date(this.targetTime));
    },
    calcListeningScore() {
      if (!this.listeningScore) return "请选择";
      return this.listeningScore.toFixed(1);
    },
    calcReadingScore() {
      if (!this.readingScore) return "请选择";
      return this.readingScore.toFixed(1);
    },
    calcWritingScore() {
      if (!this.writingScore) return "请选择";
      return this.writingScore.toFixed(1);
    },
    calcSpeakingScore() {
      if (!this.speakingScore) return "请选择";
      return this.speakingScore.toFixed(1);
    },
    calcTotalScore() {
      if (!this.totalScore) return "请选择";
      return this.totalScore.toFixed(1);
    },
    validateProgressOne() {
      return !!this.targetTime;
    },
    validateProgressTwo() {
      if (!this.target) return false;
      if (this.showCountryCell && !this.selectedCountry) return false;
      return true;
    },
    validateProgressThree() {
      return (
        this.readingScore &&
        this.writingScore &&
        this.listeningScore &&
        this.totalScore &&
        this.speakingScore
      );
    }
  },
  methods: {
    changeTarget(val) {
      if (val.active) {
        this.target = val.label;
      } else {
        this.target = "";
      }
    },
    triggerTimeSelector() {
      this.showTimeSelector = true;
    },
    // 时间选择器相关methods
    confirmTimeSelector(val) {
      this.targetTime = val;
      this.showTimeSelector = false;
    },
    cancelTimeSelector() {
      this.targetTime = "";
      this.showTimeSelector = false;
    },
    changeCountDown() {
      this.countDownSwitch = !this.countDownSwitch;
    },
    clickProgressOne() {
      // first button
      if (this.validateProgressOne) {
        this.progress = 2;
      }
    },
    prevProgress() {
      this.progress -= 1;
    },
    clickProgressTwo() {
      if (this.validateProgressTwo) {
        this.progress = 3;
      }
    },
    clickProgressThree() {
      if (this.validateProgressThree) {
        this.confirmForm();
      }
    },
    confirmForm() {
      if (this.validateProgressThree) {
        this.commitData();
        // 最终提交数据
        this.progress = 1;
        this.$emit("commit");
      }
    },
    activeCountrySelector() {
      this.showCountrySelector = true;
    },
    confirmCountrySelector(val) {
      this.selectedCountry = val;
      this.showCountrySelector = false;
    },
    cancelCountrySelector() {
      this.showCountrySelector = false;
    },
    activeScoreSelector(target) {
      this.showScoreSelector = true;
      this.scoreSelectorTarget = target;
    },
    confirmScoreSelector(val) {
      this[this.scoreSelectorTarget] = val;
      this.cancelScoreSelector();
    },
    cancelScoreSelector() {
      this.scoreSelectorTarget = "";
      this.showScoreSelector = false;
    },
    async commitData() {
      if (
        this.validateProgressOne &&
        this.validateProgressTwo &&
        this.validateProgressThree
      ) {
        const goal = {
          targetScoreListening: this.listeningScore - 0,
          targetScoreReading: this.readingScore - 0,
          targetScoreWriting: this.writingScore - 0,
          targetScoreSpeaking: this.speakingScore - 0,
          targetScoreTotal: this.totalScore - 0
        };
        const extraUserInfo = {
          countDownSwitch: this.countDownSwitch, // 是否开启桌面倒计时
          targetText: this.targetText,
          targetCountry: this.selectedCountry,
          examTime: this.formatExamTime(this.targetTime)
        };
        this.$emit('showLoading');
        await cloudHandler.postGoal(goal);
        await cloudHandler.postExtraUserInfo(extraUserInfo);
        this.$emit('dataUpdated')
      }
    },
    formatExamTime(targetTime) {
      return formatDay(new Date(targetTime));
    }
  },
  watch: {
    extraUserInfo: {
      immeidate: true,
      handler() {
        if (this.extraUserInfo) {
          (this.countDownSwitch = this.extraUserInfo.countDownSwitch), // 是否开启桌面倒计时
            (this.targetText = this.extraUserInfo.targetText),
            (this.targetCountry = this.extraUserInfo.selectedCountry),
            (this.targetTime = this.extraUserInfo.examTime);
        }
      }
    },
    goal: {
      immediate: true,
      handler() {
        if (this.goal) {
          this.listeningScore = this.goal.targetScoreListening - 0;
          this.readingScore = this.goal.targetScoreReading - 0;
          this.writingScore = this.goal.targetScoreWriting - 0;
          this.speakingScore = this.goal.targetScoreSpeaking - 0;
          this.totalScore = this.goal.targetScoreTotal - 0;
        }
      }
    }
  }
};
</script>

<style lang="less">
.target-setting {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #f7f8fa;
  z-index: 10;
}
.next-button-container {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column-reverse;
}
.setting-progress-one .next-button {
  margin: 0 32px 38px 32px;
}
.setting-progress-one,
.setting-progress-two,
.setting-progress-three {
  position: absolute;
  left: 0;
  top: 16px;
  right: 0;
  bottom: 0;
}
.setting-progress-one {
  display: flex;
  flex-direction: column;
}
.setting-progress-two,
.setting-progress-three {
  top: 65px;
  .title {
    position: absolute;
    top: -30px;
    left: 0;
    font-size: 16px;
    color: rgba(50, 50, 51, 1);
    line-height: 20px;
    padding-left: 16px;
  }
  .btn-area {
    position: absolute;
    bottom: 0;
    padding-bottom: 39px;
    height: 71px;
    display: flex;
    width: 100%;
    justify-content: center;
    .next-button-container {
      flex: none;
      box-sizing: border-box;
      width: 145px;
    }
    .next-button-container + .next-button-container {
      margin-left: 12px;
    }
  }
}
</style>